<template>
  <van-field
    is-link
    readonly
    label="地区"
    placeholder="请选择所在地区"
    v-model="fieldValue"
    @click="show = true"
  />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader
      v-bind="$attrs"
      v-model="cascaderValue"
      title="请选择所在地区"
      :options="props.options"
      @close="show = false"
      @finish="onFinish"
    />
  </van-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useCustomFieldValue } from '@vant/use'

interface Options {
  text: string
  value: string | number
  children?: Options[]
}

export interface Props {
  options: Options[]
  modelValue: string | number
}

const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  modelValue: ''
})

const emits = defineEmits({
  'update:modelValue': (val) => val
})

const show = ref(false)
const fieldValue = ref('')

// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }: any) => {
  show.value = false
  fieldValue.value = selectedOptions.map((option: any) => option.text).join('/')
  useCustomFieldValue(() => fieldValue.value)
}
defineOptions({
  name: 'VCascader'
})
</script>

<style scoped></style>
